import { Component } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import RunModel from '../RunModel/RunModel';
import LanguageChoose from '../LanguageChoose/LanguageChoose';
import axios from 'axios'
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/keymap/sublime.js';
import 'codemirror/theme/monokai.css';
import 'codemirror/addon/scroll/simplescrollbars.js';
import 'codemirror/addon/scroll/simplescrollbars.css';
import './AnswerWrap.css';


export default class AnswerWrap extends Component {

  state = {
    mode: 'javascript',
    value: '/*write your javascript code in here*/',
    index: 0,
    height: 410,
    array: [
      {
        mode: 'javascript',
        value: '/*write your javascript code in here*/',
        index: 0
      },
      {
        mode: 'xml',
        value: '<!-- write your xml code in here -->',
        index: 1
      },
      {
        mode: 'python',
        value: '#write your python code in here',
        index: 2
      }
    ]
  }

  componentDidMount() {
    const { mode } = this.state;
    const that = this;
    axios.post('https://qc2tcg.fn.thelarkcloud.com/getCodeValue', { mode: mode }).then(
      (response) => {
        const { value } = response.data.result;
        that.setState({ value: value });
      }
    )
  }

  handleSelected = (mode) => {
    const that = this;
    axios.post('https://qc2tcg.fn.thelarkcloud.com/getCodeValue', { mode: mode }).then(
      (response) => {
        const { index, mode, value } = response.data.result;
        that.setState({ index: index, mode: mode, value: value });
      }
    )

  }

  changeHeight = () => {
    const { height } = this.state;
    if (height === 410) this.setState({ height: 597 });
    else {
      this.setState({ height: 410 });
    }
  }

  reBack = () => {
    const { index, mode, array } = this.state;
    this.setState({ value: array[index].value });
    axios.post('https://qc2tcg.fn.thelarkcloud.com/setCodeValue', { mode: mode, value: array[index].value }).then(
      (response) => {
        return response;
      }
    )

  }

  reLoad = () => {
    const { mode } = this.state;
    const that = this;
    axios.post('https://qc2tcg.fn.thelarkcloud.com/getCodeValue', { mode: mode }).then(
      (response) => {
        const { value } = response.data.result;
        that.setState({ value: value });
      }
    )
  }

  changeValue = (e) => {
    this.setState({ value: e.getValue() })


  }

  saveSubmit = () => {
    const { mode, value } = this.state;
    axios.post('https://qc2tcg.fn.thelarkcloud.com/setCodeValue', { mode: mode, value: value }).then(
      (response) => {
        return response;
      }
    )
  }


  render() {
    const { mode, value, height } = this.state;
    return (
      <div id="answer-wrap">
        <div className="language-and-tips">
          <LanguageChoose handleSelected={this.handleSelected} />
          <div className="ico question">
            <div className="tip">
              <div><span>整行注释</span> <span className="gref">ctrl+/</span></div>
              <div><span className="left">复制</span> <span className="right gref">ctrl+c</span></div>
              <div><span className="left">粘贴</span> <span className="right gref">ctrl+v</span></div>
            </div>
          </div>
          <div className="ico reload" onClick={this.reLoad}>
            <div className="tip">
              强制刷新代码
            </div>
          </div>
          <div className="ico reback" onClick={this.reBack}>
            <div className="tip">
              还原初始代码
            </div>
          </div>

        </div>
        <CodeMirror
          value={value}
          options={{
            lineNumbers: true,	//显示行号
            theme: 'monokai', //设置主题
            keyMap: 'sublime',
            foldGutter: true,
            scrollbarStyle: 'overlay',
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            matchBrackets: true,	//括号匹配
            mode: mode,
          }}
          height={height}
          onChange={this.changeValue}
        />
        <RunModel changeHeight={this.changeHeight} saveSubmit={this.saveSubmit} />
      </div>
    )
  }
}